<div id="footer">
    <div id="Buttons" class="flex justify-center space-x-9 text-white py-20 border-b border-gray-50">
        <div class="flex flex-col w-40">
            <div class="font-bold mb-8">PRODUCT</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Pricing</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Professional features</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Lead Generation</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Conversations</div>
            <div class="flex items-center cursor-pointer">
                <img src="../assets/icons/videoask.svg" alt="" class="w-6 mr-2">
                <div class="font-bold text-xl">videoask</div>
            </div>
        </div>
        <div class="flex flex-col w-40">
            <div class="font-bold mb-8">TEMPLATES</div>
            <div class="mb-4 flex items-center cursor-pointer hover:text-gray-200">
                <div>Popular Templates</div>
                <img src="../assets/icons/arrow-down-white.svg" alt="" class="w-2 h-2 ml-2">
            </div>
            <div class="mb-4 flex items-center cursor-pointer hover:text-gray-200">
                <div>Lead Generation</div>
                <img src="../assets/icons/arrow-down-white.svg" alt="" class="w-2 h-2 ml-2">
            </div>
            <div class="mb-4 flex items-center cursor-pointer hover:text-gray-200">
                <div>Form Templates</div>
                <img src="../assets/icons/arrow-down-white.svg" alt="" class="w-2 h-2 ml-2">
            </div>
            <div class="w-36 flex items-end cursor-pointer hover:text-gray-200">
                <div>Questionnaire & Survey Templates</div>
                <img src="../assets/icons/arrow-down-white.svg" alt="" class="w-2 h-2 ml-2 mb-1">
            </div>
        </div>
        <div class="flex flex-col w-48">
            <div class="font-bold mb-8">INTEGRATIONS</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Google Sheets</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Zapier</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Google Analytics</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Mailchimp</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">HubSpot</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Facebook Pixel</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Airtable</div>
            <div class="cursor-pointer hover:ml-2 transform duration-500">All apps & integrations</div>
        </div>
        <div class="flex flex-col w-40">
            <div class="font-bold mb-8">RESOURCES</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Help Center</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Community</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Tutorials</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">FAQs</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Agency directory</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Partner with us</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">System status</div>
            <div class="cursor-pointer hover:ml-2 transform duration-500">Developers / API</div>
        </div>
        <div class="flex flex-col w-40">
            <div class="font-bold mb-8">GET TO KNOW US</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Our Blog</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Careers</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">Contact us</div>
            <div class="mb-4 cursor-pointer hover:ml-2 transform duration-500">News</div>
            <div class="mb-12 cursor-pointer hover:ml-2 transform duration-500">Terms & conditions</div>
            <img src="../assets/icons/media.svg" alt="" class="w-35 h-35">
        </div>
    </div>
    <div id="bottom one" class="flex justify-center space-x-96 text-white text-sm py-10">
        <div class="flex space-x-32">
            <div class="flex items-center">
                <img src="../assets/icons/waypoint.svg" alt="" class="w-5 h-5 mr-2">
                <div>With love, from Barcelona</div>
            </div>
            <div class="flex items-center">
                <img src="../assets/icons/world.svg" alt="" class="w-5 h-5 mr-2">
                <div class="cursor-pointer hover:text-gray-400">English</div>
                <img src="../assets/icons/arrow-down-white.svg" alt="" class="w-2 h-2 ml-2">
            </div>
            <div class="underline cursor-pointer hover:text-gray-400">Cookie Settings</div>  
        </div>
        <div>© Typeform</div>
    </div>
</div>

<style>
    #footer{
        background-color: #262627;
    }
</style>